{{Template:SZPT-CHINA/head}}
<html>

<head>

</head>
<!-- jquery 公共CSS-->
<script src="https://2021.igem.org/Team:SZPT-CHINA/JS/jQuery&action=raw&ctype=text/javascript"></script>
<link rel="stylesheet" href="https://2021.igem.org/Team:SZPT-CHINA/CSS/Public?action=raw&amp;ctype=text/css">

<script>
    $(document).ready(function () {
        //document.body.append(document.getElementById('loadImg'))
        //滑动
        //加载适配
        init();
        var loadImg = document.getElementById('loadImg'); //选取id为test的元素
        loadImg.style.display = 'block'; // 隐藏选择的元素
    });


    //BEGIN-loading
    var loadhidekey = 0;

    window.onload = function () {
        console.log("页面加载好了", loadhidekey)
        setTimeout(function () {
            //$("#loaderDownId").hide();
            //$("#loadingHome").hide();
            //$("#loading").hide();
        }, 10);
        init();


        setTimeout(function () {
            //$("#loaderDownId").hide();
            //滑到顶部
            //document.body.scrollTop = document.documentElement.scrollTop = 0;

            $("#directory").hide();
            $("#loadingHome").hide();

            document.body.append(document.getElementById('directory'))
            document.body.append(document.getElementById('head'))
            // $("#loading").hide();
        }, 10);




        //


    }


    function animateScroll(element, speed) {
        let rect = element.getBoundingClientRect();
        //获取元素相对窗口的top值，此处应加上窗口本身的偏移
        let top = window.pageYOffset + rect.top - 100;
        let currentTop = 0;
        let requestId;
        //采用requestAnimationFrame，平滑动画
        function step(timestamp) {
            currentTop += speed;
            if (currentTop <= top) {
                window.scrollTo(0, currentTop);
                requestId = window.requestAnimationFrame(step);
            } else {
                window.cancelAnimationFrame(requestId);
            }
        }
        window.requestAnimationFrame(step);
    }



    //设置展开
    $(document).ready(function () {

        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {
            // mobilePage();
            designHeight = 3100;
        } else {
            //pc
            designHeight = 980;
        }
        lateHeight = document.documentElement.clientHeight;
        heightRatio = lateHeight / designHeight
        console.log("height:", heightRatio)
        console.log('1')

        document.getElementById("dir1").onclick = function () {
            // window.scrollTo(0, 350*heightRatio/0.713265306122449);
            let target = document.getElementById('content1');
            animateScroll(target, 250);
            $("#directory").show();
        }
        document.getElementById("dir2").onclick = function () {
            //window.scrollTo(0, 3500 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content2');
            animateScroll(target, 250);
        }
        document.getElementById("dir3").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content3');
            animateScroll(target, 250);
        }
        document.getElementById("dir4").onclick = function () {
            //window.scrollTo(0, 4300 * heightRatio / 0.713265306122449);
            let target = document.getElementById('content4');
            animateScroll(target, 250);
        }




    });
    $(window).scroll(function () {

        if ($(this).scrollTop() > 270 * heightRatio / 0.713265306122449) {
            $("#directory").show();
        } else {
            $("#directory").hide();
        }

    });
    // 视频加载好
    // function hideLoad() {
    //     console.log("视频加载好了", loadhidekey)

    //     if (loadhidekey == 1) {
    //         setTimeout(function () {
    //             //$("#loaderDownId").hide();
    //             $("#loadingHome").hide();
    //             //$("#loading").hide();
    //         }, 10);
    //     }
    //     else if (loadhidekey == 0) {
    //         loadhidekey = 1;
    //     }
    // }
    //END-loading
</script>
<!-- jquery -->
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        // $("#m1").hover(
        //     function () {
        //         keyPic()
        //         $("#p1").animate({
        //             height: '700px',
        //             width: '650px'
        //         }, 20);
        //         $("#bg1").attr("style", "background-color: #e2594f;float: left;width: 25%;height: 650px;");

        //     },
        //     function () {
        //         $("#p1").attr("style", "height: 650px;float: left;");
        //         $("#bg1").attr("style", "background-color: #f8c8b2;float: left;width: 25%;height: 650px;");

        //     }
        // )
        //设置默认


        var pNo = "height: 450px;width:450px;float: left;transition: all 0.3s;"
        var bgNo = "background-color: #f8c8b2;float: left;width: 25%;height: 480px;transition: all 0.3s;"
        var p = "height: 480px;width:480px;float: left;	transition: all 0.3s;"
        var bg = "background-color: #e2594f;float: left;width: 25%;height: 480px;transition: all 0.3s;"

        $("#p1").attr("style", p);
        $("#bg1").attr("style", bg);

        $("#p2").attr("style", pNo);
        $("#bg2").attr("style", bgNo);

        $("#p3").attr("style", pNo);
        $("#bg3").attr("style", bgNo);

        $("#p4").attr("style", pNo);
        $("#bg4").attr("style", bgNo);

        $("#m1").mouseover(
            function () {
                $("#p2").attr("style", pNo);
                $("#bg2").attr("style", bgNo);

                $("#p3").attr("style", pNo);
                $("#bg3").attr("style", bgNo);

                $("#p4").attr("style", pNo);
                $("#bg4").attr("style", bgNo);
                //1
                $("#p1").attr("style", p);
                $("#bg1").attr("style", bg);
            },

        ),
            $("#m2").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //2
                    $("#p2").attr("style", p);
                    $("#bg2").attr("style", bg);
                },
            ),
            $("#m3").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p4").attr("style", pNo);
                    $("#bg4").attr("style", bgNo);
                    //3
                    $("#p3").attr("style", p);
                    $("#bg3").attr("style", bg);
                },
            ),
            $("#m4").mouseover(
                function () {
                    $("#p1").attr("style", pNo);
                    $("#bg1").attr("style", bgNo);

                    $("#p2").attr("style", pNo);
                    $("#bg2").attr("style", bgNo);

                    $("#p3").attr("style", pNo);
                    $("#bg3").attr("style", bgNo);
                    //4
                    $("#p4").attr("style", p);
                    $("#bg4").attr("style", bg);
                },
            )
        $("#m1").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Model";
        });
        $("#m2").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Experiments";
        });
        $("#m3").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Results";
        });
        $("#m4").click(function () {
            window.location.href = "https://2021.igem.org/Team:SZPT-CHINA/Future_Work";
        });
    });
</script>
<script>
    $(document).ready(function () {
        $("#dir1").hover(function () {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir1").attr("style", value);
        }, function () {
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir1").attr("style", value);
        });

        $("#dir2").hover(function () {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir2").attr("style", value);
        }, function () {
            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir2").attr("style", value);
        });

        $("#dir3").hover(function () {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir3").attr("style", value);
        }, function () {
            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir3").attr("style", value);
        });


        $("#dir4").hover(function () {
            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/ffffff/, "fffea4")
            $("#dir4").attr("style", value);
        }, function () {
            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/fffea4/, "ffffff")
            $("#dir4").attr("style", value);
        });


    });
</script>

<body class="pc" id="main">

    <!-- loading -->
    <div id="loadingHome"
        style=" position: fixed; left: 0px;top: -100px; width: 100%;height:115%;z-index: 999999999999;background-color: #f8c8b2;">
        <img id="loadImg"
            style=" position: relative; height: 6%;margin:0px auto;width: auto;left: 0%;top: 300px; text-align: center;display: none;"
            src="https://2021.igem.org/wiki/images/6/6f/T--SZPT-CHINA--iconGIF.png"></img>
    </div>
    <div>
        <div class="mainImg">
            <div>
                <div id="bg1" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p1" src="https://2021.igem.org/wiki/images/6/60/T--SZPT-CHINA--EXPERIMENTS-model.png"
                        class="smallImg"></image>
                </div>
                <div id="bg2" style="background-color: #f8c8b2;float: left;width: 25%;">

                    <image id="p2"
                        src="https://2021.igem.org/wiki/images/a/ab/T--SZPT-CHINA--EXPERIMENTS-Experiments.png"
                        class="smallImg"></image>

                </div>
                <div id="bg3" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p3" src="https://2021.igem.org/wiki/images/a/a9/T--SZPT-CHINA--EXPERIMENTS-results.png"
                        class="smallImg"></image>
                </div>
                <div id="bg4" style="background-color: #f8c8b2;float: left;width: 25%;">
                    <image id="p4" src="https://2021.igem.org/wiki/images/5/5c/T--SZPT-CHINA--EXPERIMENTS-work.png"
                        class="smallImg"></image>
                </div>
            </div>
            <div style="z-index: 99;position: absolute;">
                <image src="https://2021.igem.org/wiki/images/6/64/T--SZPT-CHINA--EXPERIMENTS-models.png"
                    style="margin-top: -50px;margin-left: 683px;"> </image>
            </div>
            <div style="margin-top: 50px;">
                <div id="m1" style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;"></div>
                <div id="m2"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 480px;">
                </div>
                <div id="m3"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 960px;">
                </div>
                <div id="m4"
                    style="width: 480px;height: 480px;z-index: 9999;position: absolute;float:left;margin-left: 1440px;">
                </div>
            </div>
        </div>

        <!-- down -->
        <div style="width: 1920px;background-color: #ffffff;">
            <div id="blue" style="float:left; height: 7000px; width: 55px;background-color: #2588d4;">
            </div>
            <div id="directory" style="float:left;margin-top: 8vh;z-index: 990;position: fixed;">
                <div
                    style="margin-top: 9vh;background-color: #dd544d;margin-left: 6vw;border-radius:10px;padding: 1vw;width: 16vw;">
                    <h3 id="dir0p"
                        style="color:#fffea4;margin-left: 10%;font-size:1.8rem;font-family: 'Quicksand', sans-serif;">
                        Model</h3>
                    <div style="margin-left: 13%;">
                        <div id="dir1"
                            style="color:#ffffff; transition: all 0.3s;width: auto;height: 6vh;margin-top: 3vh;">
                            <p id="dir1p"
                                style="font-size: 1.2rem;padding-top: 0vh;font-family: 'Quicksand', sans-serif;">
                                Introduction
                            </p>
                        </div>

                        <div id="dir2" style="color:#ffffff;height:6vh;width: auto;">
                            <p id="dir2p"
                                style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;">
                                Modeling
                            </p>
                        </div>

                        <div id="dir3" style="color:#ffffff;height:6vh;width: auto;">
                            <p id="dir3p"
                                style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;">
                                Result
                            </p>
                        </div>
                        <div id="dir4" style="color:#ffffff;width: auto;height: 6vh;">
                            <p id="dir4p"
                                style="transition: all 0.3s;font-size: 1.2rem;padding-top: 0vh;">

                                References</p>
                        </div>


                    </div>
                </div>
            </div>
            <div class="content"
                style="float:left;width: 1173px;margin-left: 397px;margin-top: 100px;padding-left:100px;background-color: #ffffff;text-align: justify;">

                <div id="content1" class="yj">
                    ● Introduction

                </div>

                <div class="pb">
                    The production of bacterial cellulose (BC) in <i>Gluconacetobacter hansenii </i>is regulated by the
                    second
                    messenger
                    c-di-GMP. BphS
                    is a photo-activated diguanylate cyclase (DGC) that regulates the synthesis of of c-di-GMP. Upon
                    illumination with near-infrared light, BphS will be activated with changed protein conformation and
                    start to synthesize c-di-GMP. FcsR is a c-di-GMP phosphodiesterase that regulates the hydrolysis of
                    c-di-GMP. When the synthesis rate of c-di-GMP within the cell is higher than its hydrolysis rate,
                    the
                    concentration of c-di-GMP will increase. And the bacteria will produce BC film accordingly. To
                    describe
                    such a process precisely as well as accelerate the engineering cycle, we use modeling to simulate
                    c-di-GMP signaling.
                </div>

                <image src="https://2021.igem.org/wiki/images/8/8b/T--SZPT-CHINA--model-pic-0.png" class="pic"
                    style="margin-left: 160px;"></image>

                <div class="tz">
                    Figure 1. Gene circuit of J23100-B0034-bphS-bphO-J23109-B0034-fcsR- pSEVA331 (<a
                        href="http://parts.igem.org/Part:BBa_K3740030">BBa_K3740030</a>)
                </div>
                <div id="content2" class="yj">● Modeling

                </div>
                <div class="ej">

                    2.1 Reaction Equations:
                </div>

                <div class="pb">
                    Photon activation of Bphs
                    <br>
                    <img src="https://2021.igem.org/wiki/images/4/40/T--SZPT-CHINA--model-pic-1.png"
                        style="margin-left: 150px;">
                    <br>
                    c-di-GMP signaling
                    <br>
                    <img src="https://2021.igem.org/wiki/images/4/47/T--SZPT-CHINA--model-pic-2.png"
                        style="margin-left: 145px;width: 745px;">
                    <br>
                </div>

                <div class="ej">

                    2.2 Mathematical Model:
                </div>
                <img src="https://2021.igem.org/wiki/images/4/45/T--SZPT-CHINA--model-pic-3.png"
                    style="margin-left: 50px;width: 1000px;margin-top: 50px;">


                <div id="content3" class="yj">● Results

                </div>

                <img src="https://2021.igem.org/wiki/images/4/46/T--SZPT-CHINA--model-pic-4.png" class="pic"
                    style="margin-left: 20px;width: 1100px;">
                <div class="tz">Figure 2. NIR Lighting Power Density Profile </div>
                <img src="https://2021.igem.org/wiki/images/b/b1/T--SZPT-CHINA--model-pic-5.png"
                    style="margin-left: 20px;margin-top: 50px;width: 1100px;">
                <div class="tz">Figure 3. C-di-GMP Concentration Profile upon NIR Light Illumination</div>
                <div class="pb">
                    According to the modeling results, near-infrared light has a significant impact on the synthesis of
                    c-di-GMP. The concentration of c-di-GMP is almost zero without light irradiation. However, the
                    concentration of c-di-GMP increases rapidly upon NIR light illumination. Thus, from a theoretical
                    point
                    of view, we can use NIR light to regulate the c-di-GMP concentration.
                </div>


                <img src="https://2021.igem.org/wiki/images/e/ec/T--SZPT-CHINA--model-pic-6.png"
                    style="margin-top: 100px;margin-left: 390px;width: 500px;">
                <div class="tz">Figure 4. Comparision of the dry weight of BC film under NIR light and in the dark
                    produced
                    by the engineered bacteria J23100-B0034-bphS-bphO-J23109-B0034-fcsR-pSEVA331-<i>G. hansenii </i>ATCC
                    53582
                </div>
                <div class="pb">
                    The validation experiments results show that light significantly enhances the production of BC
                    films,
                    and that the production of BC film is relatively low in the dark. Although this does not reach an
                    ideal
                    state where no BC film is produced at all in the dark, it still achieves partial light control of BC
                    film production, which is consistent with the trends of modeling results.


                </div>
                <div id="content4" class="yj">
                    ● References

                </div>
                <div class=" pb">[1] Ryu M H , Gomelsky M . Near-infrared Light Responsive Synthetic c-di-GMP Module for
                    Optogenetic Applications [J]. Acs Synthetic Biology, 2014, 3(11): 802.
                </div>


            </div>
            <div id="red" style="float: left;margin-left: 140px; height: 7000px;width: 55px;background-color: #d44225;">
            </div>
        </div>
        <image src="https://2021.igem.org/wiki/images/8/8d/T--SZPT-CHINA--bottomPic.png" class="pic"
            style="margin-top: -372px;width: 1920px;"></image>
    </div>
</body>

<script>
    var bodyStyle = document.createElement('style')
    var docWidth, docHeight;
    var designWidth, designHeight;

    // 屏幕缩放实现
    function refreshScale() {
        bodyStyle.innerHTML = `body{width:${designWidth}px; height:${designHeight}px!important;}`
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.getElementById('main').style = 'display:flex'
        //document.getElementsByClassName('mobile')[0].style = 'display:none'

        var widthRatio = docWidth / designWidth,
            heightRatio = docHeight / designHeight;
        var topRatio = 26 * heightRatio;
        //heightRatio=0.782222;
        //解决因transform导致margin-top
        console.log(heightRatio)
        document.getElementById('content').style =
            `transform:scale(${widthRatio},${heightRatio});transform-origin:left top;margin-top: -${topRatio}px;`;
        // 应对浏览器全屏切换前后窗口因短暂滚动条问题出现未占满情况
        setTimeout(function () {
            var lateWidth = document.documentElement.clientWidth,
                lateHeight = document.documentElement.clientHeight;
            if (lateWidth === docWidth) return;

            widthRatio = lateWidth / designWidth
            heightRatio = lateHeight / designHeight

            document.getElementById('content').style = "transform:scale(" + widthRatio + "," + heightRatio +
                ");transform-origin:left top;margin-top: -${topRatio}px;"
        }, 0)
    }

    // 清除scale
    function clearScale() {
        // 清除pc样式
        bodyStyle.innerHTML = ``
        document.documentElement.firstElementChild.appendChild(bodyStyle)
        document.body.style = "transform:none;transform-origin:none"
    }

    // 初始化
    function init() {
        // 获取当前屏幕可视区域大小
        docWidth = document.documentElement.clientWidth;
        docHeight = document.documentElement.clientHeight;
        // 判断是否是移动设备
        if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone/i.test(navigator.userAgent)) {

            // mobilePage();
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 3100;
            mainClass.add('pc');
            mainClass.remove('large');
           
            var value = document.getElementById('blue').getAttribute("style")
            value = value.replace(/7000/, "8000")
            $("#blue").attr("style", value);

            var value = document.getElementById('red').getAttribute("style")
            value = value.replace(/7000/, "8000")
            $("#red").attr("style", value);

            //手机适配目录
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir1").attr("style", value);
            //margin
            var value = document.getElementById('dir1').getAttribute("style")
            value = value.replace(/3vh/, "1vh")
            $("#dir1").attr("style", value);

            var value = document.getElementById('dir2').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir2").attr("style", value);

            var value = document.getElementById('dir3').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir3").attr("style", value);

            var value = document.getElementById('dir4').getAttribute("style")
            value = value.replace(/6vh/, "2vh")
            $("#dir4").attr("style", value);

            var value = document.getElementById('dir0p').getAttribute("style")
            value = value.replace(/1.8rem/, "1.3rem")
            $("#dir0p").attr("style", value);

            var value = document.getElementById('dir1p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir1p").attr("style", value);

            var value = document.getElementById('dir2p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir2p").attr("style", value);

            var value = document.getElementById('dir3p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir3p").attr("style", value);

            var value = document.getElementById('dir4p').getAttribute("style")
            value = value.replace(/1.2rem/, "0.9rem")
            $("#dir4p").attr("style", value);

            refreshScale()
        } else {
            //pc
            let mainClass = document.getElementById('main').classList;
            designWidth = 1920;
            designHeight = 980;
            mainClass.add('pc');
            mainClass.remove('large');
            refreshScale()

        }
    }

    // 大屏设置 rem 函数
    function setRem(designSize) {
        // 基准大小
        baseSize = 100;
        let basePc = baseSize / designSize; // 表示1680的设计图,使用100PX的默认值
        let vW = window.innerWidth; // 当前窗口的宽度

        let rem = vW * basePc; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应font-size值
        document.documentElement.style.fontSize = rem + "px";
    }



    // 移动端页面
    function mobilePage() {
        clearScale()
        // 是移动设备 展示移动设备页
        //document.getElementById('main').style = 'display:none'
        //document.getElementsByClassName('mobile')[0].style = 'display:flex'
        // mobile 设置 rem 函数
        let designSize = 750;
        setRem(designSize);


    }

    // 初始化
    //init();

    // 监听前进/后退以及load事件触发
    window.addEventListener("pageshow", function (e) {
        if (e.persisted) { // 浏览器后退的时候重新计算
            init()
        }
    }, false);

    // 监听屏幕缩放
    window.addEventListener("resize", function () {
        init()
    }, false);
</script>
<!-- END-适配 -->





</html>